<template>
    <div>
        <!-- 搜索 -->
        <div class="addRole">
            <el-input style="width: 180px;margin-right: 10px;" v-model="input" placeholder="请输入账户名"></el-input>
            <el-button style="background-color: green;" type="primary" @click='serach'>搜索</el-button>
            <el-button type="primary" @click='addClick'>添加</el-button>
        </div>
        <!-- 表格 -->
        <el-table
            :data="tableData"
            style="width: 99%">
            <el-table-column
                label="编号"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="账号"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.loginId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="加入时间"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="电话"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.phone }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="角色"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.role.roleName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-button
                    type="primary"
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">启用</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    type="warning"
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: center; margin-top: 5px;">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="count"
                :page-size='8'
                @current-change='currentChange'>
            </el-pagination>
        </div>
         <!-- 抽屉 -->
         <el-drawer
            :title="isAdd?'添加账户':'修改角色'"
            :visible.sync="drawer"
            direction="rtl"
            :before-close="handleClose">
            <div style="padding: 10px;">
                <el-form size='mini' :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                    <el-form-item label="账号" prop="loginId">
                        <el-input type="text" v-model="ruleForm.loginId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="loginPwd">
                        <el-input type="password" v-model="ruleForm.loginPwd" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="loginPwd2">
                        <el-input type="password" v-model="ruleForm.loginPwd2" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-radio v-model="ruleForm.sex" label="男">启用</el-radio>
                        <el-radio v-model="ruleForm.sex" label="女">禁用</el-radio>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="ruleForm.roleName" placeholder="请选择">
                            <el-option
                              v-for="item in option"
                              :key="item.id"
                              :label="item.roleName"
                              :value="item.roleName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">{{isAdd?'添加':'修改'}}</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            
        </el-drawer>
    </div>
</template>
<script>
    import {ADMIN_CONSTANT,ROLELISTGTE} from '../../../utils/constant.js'
    import * as adminApi from '../../../api/adminApi.js'
    import * as roleApi from '../../../api/roleApi.js'
    export default{
        name:'IntegralUpdate',
        created () {
            
            this.getTableData()
            this.option =roleApi.findTableData(ROLELISTGTE)
        },
        data() {
            //验证角色名称
            var validateLoginId = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入账号'));
                } else {
                    callback();
                }
            };
            var validateLoginPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
            var validateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入姓名'));
                } else {
                    callback();
                }
            };
            var validatePhone = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入电话'));
                } else {
                    callback();
                }
            };
            var validateLoginPwd2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if(value !==this.ruleForm.loginPwd) {
                    callback(new Error('密码错误'));
                }else{
                    callback();
                }
            };
            return {
                //是否搜索
                isSerach:false,
                //搜索内容
                input: '',
                //表格数据
                tableData: [],
                //是否打开抽屉
                drawer: false,
                 // 表单数据
                ruleForm: {
                    loginId: '',
                    loginPwd: '',
                    name: '',
                    phone: '',
                    sex: '',
                    roleName:'',
                    loginPwd2:''
                },
                // 表单验证数据
                rules: {
                    loginId: [
                        // 失去光标触发函数
                        { validator: validateLoginId, trigger: 'blur' }
                    ],
                    loginPwd: [
                        // 失去光标触发函数
                        { validator: validateLoginPwd, trigger: 'blur' }
                    ],
                    name: [
                        // 失去光标触发函数
                        { validator: validateName, trigger: 'blur' }
                    ],
                    phone: [
                        // 失去光标触发函数
                        { validator: validatePhone, trigger: 'blur' }
                    ]
                    ,
                    loginPwd2: [
                        // 失去光标触发函数
                        { validator: validateLoginPwd2, trigger: 'blur' }
                    ]
                },
                //抽屉是添加数据还是修改数据
                isAdd: true,
                //角色选择
                option:[],
                //数据总数量
                count:0,
                //当前页
                pageIndex:1

            }
        },
        methods: {
            //搜索
            serach(){
                this.isSerach = true
                this.getTableData()
                this.isSerach = false
            },
            //获取表格数据
            //data 单页数据   count 后台数据总数量 用于分多少页
            getTableData(){
                let {data,count} = adminApi.findAdminList(ADMIN_CONSTANT.ADMINLISTGET,{
                    serach:{
                        isSerach:this.isSerach,
                        roleName:this.input
                    },
                    pageIndex:this.pageIndex,
                    singlePageCount:8
                })  
                this.tableData = data 
                this.count = count
            },
            //页跳转
            currentChange(val){
                this.pageIndex = val
                this.getTableData()
            },
            //打开右侧抽屉
            addClick(){
                this.drawer = true
            },
            //编辑
            handleEdit(index, row) {
                this.isAdd = false 
                this.drawer = true
                //将数据封装为表格数据
                this.ruleForm.id = row.id
                this.ruleForm.loginId = row.loginId
                this.ruleForm.name = row.name
                this.ruleForm.phone = row.phone
                this.ruleForm.sex = row.sex
                this.ruleForm.roleName = row.role.roleName
            },
            //删除
            handleDelete(index,row) {
                this.$con_firm('确认要删除吗','警告',(params) => {
                    console.log(row);
                    let res = adminApi.adminDelete(ADMIN_CONSTANT.ADMINDELETE,row)
                    console.log(res);
                    if(res.success){
                        this.$msg_s('删除成功',1000)
                        //获取最新数据
                        this.getTableData()
                    }
                    else 
                        this.$msg_e('删除失败',1000)
                },(params) => {
                    this.$msg_i('已取消删除',1000)
                })
            },
            //关闭抽屉
            handleClose(done) {
                this.isAdd = true
                this.ruleForm = {
                        loginId: '',
                        loginPwd: '',
                        name: '',
                        phone: '',
                        sex: '',
                        roleName:'',
                        loginPwd2:''
                    },
                done();
            },
            //表单提交方法
            submitForm(formName) {
                this.$refs[formName].validate( (valid) => {
                //表单数据是否符合要求
                    if (valid) {
                        if(this.ruleForm.sex==='')
                            this.$msg_e('请选择性别')
                        else if(this.ruleForm.roleName==='')
                            this.$msg_e('请选择角色')
                        else{
                            if(this.isAdd){
                                //执行添加操作
                                let res = adminApi.adminAdd(ADMIN_CONSTANT.ADMINADD,this.ruleForm)
                                if(res.success){
                                    //获取最新数据
                                    this.getTableData()
                                    this.$msg_s('添加成功',1000)
                                }else{
                                    this.$msg_e('添加失败',1000)
                                }
                            }else{
                                //执行修改操作
                                let res = adminApi.adminUpdate(ADMIN_CONSTANT.ADMINUPDATE,this.ruleForm)
                                console.log(res);
                                if(res.success){
                                    //获取最新数据
                                    //this.tableData = res.newUserInfo
                                    // this.getTableData()
                                    console.log(this.tableData);
                                    this.$msg_s('修改成功',1000)
                                }else{
                                    this.$msg_e('修改失败',1000)
                                }
                            }
                        }
                    }else{
                        this.$msg_e('表单数据不符合要求',1000)
                    } 
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>